<template>
	<view class="user-info">
		<view class="avatar-wrapper">
			<image class="avatar" src="../../static/home.png" mode=""></image>
		</view>
		<view class='ul'>
			<view class='li'>
				<image class="u-cell_image" src="../../static/home.png" mode=""></image>
				<view class="u-cell__title required">
				</view>
				<input class='catname' type="text" v-model="name" placeholder="请输入姓名" />
			</view>
		</view>
		<view class='line'></view>
		<view class='ul'>
			<view class='li'>
				<image class="u-cell_image" src="../../static/home.png" mode=""></image>
				<view class="u-cell__title required">
				</view>
				<input class='catname' type="number" maxlength="11" v-model="phone" 
					placeholder="请输入手机号" />
			</view>
		</view>
		<view class='line'></view>
		<view class='ul'>
			<view class='li'>
				<image class="u-cell_image" src="../../static/home.png" mode=""></image>
				<view class="u-cell__title required">
				</view>
				<input class='catname' type="number" v-model="yanzhen" placeholder="请输入验证码" />
				<button class="btn_yan" @click="startCountdown" :disabled="counting">{{ buttonText }}</button>
			</view>
		</view>
		<view class='lineq'></view>
		<button class="saveBtn" @click="saveInfo">保存</button>


		<view class="section-5 flex-align">
			<u-checkbox-group v-model="checked" placement="row" @change="checkboxChange" iconSize='20px' size='20px'>
				<u-checkbox label="我已阅读并同意" activeColor="rgb(255, 101, 85)" labelSize="13px" labelColor="#999999"
					:checked="false"></u-checkbox>
			</u-checkbox-group>
			<view class="info-1 flex-align">
				<view class="info-2" @click="showInfo = true" style="font-size: 26rpx;">《用户须知》</view>
			</view>
		</view>

		<view class=""
			style="position: absolute;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index: 998;top: 0;opacity: .80;"
			v-if="onclickin"></view>
		<view class="scrolllist" v-if="onclickin">
			<view class="toubu">免责条款</view>
			<scroll-view scroll-y="true" class="scroll">
				<view class="xiangqing">本网站技术支持由江苏点拓信息技术有限公司</view>
				<view class="fanhui" @click="onclickfh">
					关闭
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import {
		sendSms , yzmLogin 
	} from '@/common/api';
	export default {
		data() {
			return {
				phone: '',
				name:"",
				yanzhen:'',
				home: this.$baseUrl + 'logo.png',
				checked: [],
				read_checked: false,
				counting: false, // 是否正在倒计时
				countdown: 60, // 倒计时时长，单位为秒
				buttonText: '验证码', // 按钮文本
				onclickin: false, //用户须知弹窗
				open_id:''
			}
		},
		onLoad() {
			//uni.clearStorage();
			//uni.clearStorageSync();
			uni.removeStorageSync('token');
			uni.removeStorageSync('userlist');
		},
		onShow() {
			//uni.clearStorage();
			//uni.clearStorageSync();
			uni.removeStorageSync('token');
			uni.removeStorageSync('userlist');
			console.log(uni.getStorageSync('OPENID'),'1111')
			this.open_id = uni.getStorageSync('OPENID');
		},
		methods: {
			saveInfo() {
				yzmLogin({
					phone: this.phone,
					yzm:this.yanzhen,
					username:this.name,
					open_id:this.open_id
				})
					.then(res => {
							// uni.removeStorageSync('token');
							uni.setStorageSync('token',res.access_token)
							uni.setStorageSync('userlist',res.user)
							uni.navigateTo({
								url: '/pages/venue/venue'
							})
							
							this.$refs.complete(res);
							uni.setStorageSync('token', res.access_token)
							console.log(uni.getStorageSync('token'),'---4')
					})
					// .catch(err => {
					// 	uni.$u.toast('服务器繁忙,请稍后再试!');
					// });
				
			},
			// 免责说明协议
			checkboxChange(e) {
				console.log(e, '123')
				if (e.length == 0) {
					this.read_checked = false;
				} else {
					this.read_checked = true;
				}
			},
			// 手机号码验证码
			startCountdown() {
				if (this.counting) {
					return;
				}
				if (!this.phone) {
					uni.$u.toast('请输入手机号码');
					return;
				}
				// 开始倒计时
				this.counting = true;
				this.buttonText = `${this.countdown}s`;

				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.buttonText = `${this.countdown}s`;
					} else {
						// 倒计时结束
						this.counting = false;
						this.countdown = 60;
						this.buttonText = '验证码';
						clearInterval(timer);
					}
				}, 1000);
				sendSms({
					phone: this.phone
				})
					.then(res => {
						console.log(res,'222')
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试!');
					});
			},
			// 关闭用户须知弹窗
			onclickfh() {
				this.onclickin = false
			},
		},


	}
</script>

<style lang="scss">
	.user-info {
		width: 100vw;
		min-height: 100vh;
		position: relative;

		/deep/.u-form {
			.u-form-item {
				background-color: #fff;
			}

			.u-form-item__body {
				padding: 30rpx;
			}

			.group {
				margin-top: 20rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 270rpx !important;
			}
		}

		.avatar-wrapper {
			padding-top: 200upx;
			text-align: center;
			padding-bottom: 80rpx;


			&::after {
				display: none;
			}

			.avatar {
				width: 100upx;
				height: 100upx;
				border-radius: 8upx;
			}
		}

		.ul {
			width: 92%;
			height: 65rpx;
			margin: auto;
			margin-top: 30rpx;

			.li {
				width: 88%;
				height: 80rpx;
				line-height: 20rpx;
				display: flex;
				margin-left: 10%;
				// justify-content: space-between;
				// padding: 0  100rpx 0 50rpx;

				.btn_yan {
					width: 20vw;
					height: 9vw;
					background-color: #2ba9f6;
					color: #fff;
					border: none;
					line-height: 9vw;
					font-size: 25rpx;
				}

				.left {
					font-size: 32rpx;
					color: #333;
					text-align: left;
				}

				.u-cell_image {
					width: 50rpx;
					height: 50rpx;
				}

				.u-cell__title {
					color: #333;
					font-size: 32rpx !important;
					font-weight: 500;


					&.required {
						&::before {
							content: '*';
							color: #fb2222;
						}
					}
				}
			}

			.catname {
				color: #999;
				margin-left: 30rpx;
				margin-top: 1rpx;
				font-size: 28rpx;
			}
		}

		.section-5 {
			margin-left: 15%;
			margin-top: 100rpx;

			.info-1 {
				font-size: 32rpx;
				font-weight: 500;
				color: #999999;
			}

			.info-2 {
				color: rgb(255, 101, 85);
			}
		}

		.line {
			width: 60%;
			height: 1rpx;
			background-color: #e6e6e6;
			float: right;
			margin-right: 15%;
		}

		.lineq {
			width: 40%;
			height: 1rpx;
			background-color: #e6e6e6;
			float: right;
			margin-right: 35%;
		}

		.saveBtn {
			background: #2ba9f6;
			color: white;
			display: block;
			width: calc(100% - 150upx);
			border-radius: 44upx;
			margin: 60upx auto 0;
			margin-left: 10%;
		}

		.scrolllist {
			position: fixed;
			z-index: 999;
			color: #000000;
			width: 80%;
			height: 60%;
			background-color: #fff;
			left: 10%;
			top: 20%;
			border-radius: 10rpx;


			.toubu {
				width: 100%;
				height: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				margin-top: 10rpx;
				position: absolute;
				top: 10rpx;
			}

			.scroll {
				position: absolute;
				z-index: 999;
				color: #000000;
				width: 100%;
				height: 55vh;
				background-color: #fff;
				left: 0;
				top: 70rpx;
				border-radius: 10rpx;

				.fanhui {
					width: 30%;
					height: 80rpx;
					background: #b3b8bb;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
					margin: 0 auto;
					font-size: 30rpx;
					margin-top: 10rpx;
					margin-left: 35%;
				}

				.xiangqing {
					width: 97%;
					height: auto;
					overflow-wrap: break-word;
					color: rgba(0, 0, 0, 1.0);
					font-size: 28rpx;
					font-weight: 500;
					text-align: left;
					line-height: 34rpx;
					margin: 10rpx 0 0 20rpx;
					padding-right: 20rpx;
				}
			}
		}
	}
</style>